<template>
  <div class="feature">
    <router-link :to="`/article/${data.id}`">
      <div class="feature-title">
        <span class="foverlay">{{ data.title }}</span>
      </div>
      <img :src="data.img" />
    </router-link>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "feature",
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          title: "Akina",
          img:
            "https://cdn.zhebk.cn/usr/themes/Akina//images/feature/feature1.jpg",
          href: "https://zhebk.cn/Web/Akina.html",
        };
      },
    },
  },
});
</script>

<style lang="less" scoped>
.feature {
  width: inherit;
  position: relative;
  img {
    height: 160px;
    width: 257px;
    object-fit: cover;
    border-radius: 5px;
  }
  & a:hover .foverlay {
    opacity: 1;
  }
  .foverlay {
    position: absolute;
    z-index: 2;
    width: 257px;
    height: 160px;
    text-align: center;
    line-height: 160px;
    background: #bbe2db;
    color: white;
    font-size: 16px;
    opacity: 0;
    border-radius: 5px;

    -moz-transition: opacity 0.4s ease-out;
    -o-transition: opacity 0.4s ease-out;
    -webkit-transition: opacity 0.4s ease-out;
    transition: opacity 0.4s ease-out;
  }
}
</style>